<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 适配 移动设备 -->
    <title>用户订单信息</title>
    <style>
        h2 {
            text-align: center; /* 标题文字 居中 */
        }

        table,td {
            border: 1px solid #000; // 给表格加边框线
        }

        table {
            border-collapse: collapse; /* 合并相邻边框线 */
            height: 80px; /* 表格高度, 宽 因为是表格会随内容撑开 */
            margin: 0 auto; /* 版心居中, 效果表格页面居中显示 */
            text-align: center; /* 文字居中, 效果表格里的文字视频居中*/
        }

        td {
            padding: 5px 30px; /* 表格加 内边距(2值写法), 效果文字与边框线拉开距离 */
        }
    </style>
</head>
<body>
<h4>需求：用户输入商品价格和商品数量，以及收货地址，可以自动打印订单信息</h4>
<p>
分析： <br>
①：需要输入3个数据，所以需要3个变量来存储 '价格' '数量' '地址'： <br>
②：需要计算总的价格 '总价'： <br>
③：页面打印生成表格，里面填充数据即可： <br>
④：记得最好使用模板字符串
</p>
<hr>

<!--案例-->
<h2>订单确认</h2>


<script>
    // 1 用户输入
    let 价格 = +prompt('请输入商品价格：') // 前面加 + 号, 直接转换成为 数字类型
    let 数量 = +prompt('请输入商品数量：')
    let 地址 = prompt('请输入收获地址：')

    // 2.计算总额
    let 总价 = 价格 * 数量

    // 3.输出到页面
    // 注意这里的引号是 反引号, 因为要加变量
    document.write(`
        <table> <!-- 表格标签 -->
        <tr>  <!-- 第一行 表格 -->
            <td>商品名称</td>
            <td>商品价格</td>
            <td>商品数量</td>
            <td>总价</td>
            <td>收货地址</td>
        </tr>
        <tr> <!-- 第二行 表格 -->
            <td>华为P60</td>
            <td>${价格}元</td>
            <td>${数量} </td>
            <td>${总价}元</td>
            <td>${地址} </td>
        </tr>
    </table>
    `)
</script>

</body>
</html>